import React, { PureComponent } from 'react';
import {
  Input,
  Button,
  Row,
  Col,
  message
} from 'antd';

export default class GroupAdd extends PureComponent {
  state = {
    visible : false,
    value : ''
  };

  bindAddGroup = ()=>{
    const { value } = this.state;
    if(value == ''){
      message.error('分类名称不能为空');
      return false;
    }
    this.props.dispatch({
      type: 'addGoods/saveGroup',
      payload: {
        name : value
      },
    })
    // .then(res=>{
    //   console.log(res);
    //   this.setState({
    //     visible: false,
    //     value : ''
    //   });
    // })
  };

  bindInputChange = (e)=>{
      this.setState({
        value : e.target.value
      });
  };

  bindVisibleGroupForm = ()=>{
    this.setState({
      visible : !this.state.visible
    });
  };

  render(){
    const { visible, value } = this.state;
    return <div>
      <a onClick={()=>{this.bindVisibleGroupForm()}}>{visible ? '取消' : '新增'}</a>
      <Row gutter={12} style={{'display' : visible ? 'block' : 'none'}}>
        <Col md={9}><Input value={value} onChange={this.bindInputChange} placeholder="请输入新增分组名称" /></Col>
        <Col md={6}><Button onClick={this.bindAddGroup}>新增</Button><Button style={{marginLeft:'8px'}} onClick={this.bindVisibleGroupForm}>取消</Button></Col>
      </Row>
    </div>
  }
}

